Виджеты. Checkbox FAB AlertDialog Switch

➡️Ссылка на репозиторий с кодом этого урока

Виджет AlertDialog

Виджет AlertDialog уведомляет пользователя о ситуации, требующей подтверждения. Он может содержать заголовок, контент (обычно текст или поле ввода) и действия (кнопки).

Для показа диалога используется функция showDialog(), которая является частью навигационной системы Flutter и отображает диалог поверх текущего экрана.

Основные части AlertDialog:

• title: Widget? - заголовок диалога.
• content: Widget? - основное содержимое диалога (например, Text, TextField).
• actions: Список виджетов (обычно кнопок, таких как TextButton или ElevatedButton), расположенных внизу диалога.
• showDialog() - функция, которая отображает диалог.

Вызов виджета AlertDialog через метод showDialog

Теперь реализуем метод showAddTaskDialog для показа диалога и добавления задачи.
Добавляем метод внутри класса _ToDoScreenState

Файл todo_screen.dart

// ...
// Добавляем метод внутри класса _ToDoScreenState

// Метод для показа диалога добавления задачи  
void showAddTaskDialog() {  
  showDialog(  
    context: context,  
    builder: (BuildContext context) {  
      return AlertDialog(  
        title: const Text('Добавить новую задачу'),  
        content: TextField(  
          decoration: const InputDecoration(hintText: "Введите текст задачи"),  
        ),  
        actions: <Widget>[  
          // Кнопка отмены  
          TextButton(  
            child: const Text('Отмена'),  
            onPressed: () {  
              Navigator.of(context).pop(); // Закрыть диалог  
            },  
          ),  
          // Кнопка добавления  
          TextButton(  
            child: const Text('Добавить'),  
            onPressed: () {  
              Navigator.of(context).pop(); // Закрыть диалог  
            },  
          ),  
        ],  
      );  
    },  
  );  
}

                  

FAB Обработчик нажатия

Вызываем этот метод по нажатию на FAB кнопку

// ...
floatingActionButton: FloatingActionButton.extended(
  onPressed: showAddTaskDialog, // Вызываем метод показа диалога  
  label: const Text('Добавить'),
  icon: const Icon(Icons.add),
  tooltip: 'Добавить новую задачу',
),

                  

Добавление задачи через диалоговое окно

Добавим состояние TextEditingController текстового поля, для управления данными.
При нажатии на кнопку добавить в диалоговом окне, получаем через контроллер данные из текстового поля и добавляем в массив со списком задач.

Полностью код экрана ToDoScreen

Файл todo_screen.dart

import 'package:flutter/material.dart';  
  
import '../models/task.dart';  
  
class ToDoScreen extends StatefulWidget {  
  const ToDoScreen({super.key});  
  
  @override  
  State<ToDoScreen> createState() => _ToDoScreenState();  
}  
  
  
class _ToDoScreenState extends State<ToDoScreen> {  
  
  // Контроллер для ввода текста  
  TextEditingController textEditingController = TextEditingController();  
  
  // Список задач  
  final List<Task> _tasks = [  
    Task(text: 'Купить молоко'),  
    Task(text: 'Изучить нейронки'),  
    Task(text: 'Купить RTX 5090', isDone: true), // Пример выполненной задачи  
  ];  
  
  // Метод для показа диалога добавления задачи  
  void showAddTaskDialog() {  
    showDialog(  
      context: context,  
      builder: (BuildContext context) {  
        return AlertDialog(  
          title: const Text('Добавить новую задачу'),  
          content: TextField(  
            controller: textEditingController,  
            decoration: const InputDecoration(hintText: "Введите текст задачи"),  
          ),  
          actions: <Widget>[  
            // Кнопка отмены  
            TextButton(  
              child: const Text('Отмена'),  
              onPressed: () {  
                Navigator.of(context).pop(); // Закрыть диалог  
              },  
            ),  
            // Кнопка добавления  
            TextButton(  
              child: const Text('Добавить'),  
              onPressed: () {  
                setState(() {  
                  // Добавляем задачу в список  
                  _tasks.add(Task(text: textEditingController.text));  
                  // Очищаем контроллер  
                  textEditingController.clear();  
                });  
                Navigator.of(context).pop(); // Закрыть диалог  
              },  
            ),  
          ],  
        );  
      },  
    );  
  }  
    
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('Список Задач'),  
      ),  
      // Добавляем FAB  
  
      body: ListView.builder(  
        itemCount: _tasks.length, // Количество задач  
        itemBuilder: (context, index) {  
  
          final task = _tasks[index]; // Текущая задача  
  
          return ListTile(  
            // Чекбокс слева  
            leading: Checkbox(  
              value: task.isDone, // значение выполненности из объекта task  
              onChanged: (bool? newValue) {  
                // При изменении чекбокса, переключаем статус задачи  
                setState(() {  
                  task.isDone = newValue ?? false; // Меняем статус на новый  
                });  
              },  
            ),  
            // Текст задачи с зачеркиванием  
            title: Text(  
              task.text,  
              style: TextStyle(  
                decoration: task.isDone  
                    ? TextDecoration.lineThrough // Зачеркнутый, если выполнена  
                    : TextDecoration.none, // Обычный, если не выполнена  
              ),  
            ),  
          );  
        },  
      ),  
  
      floatingActionButton: FloatingActionButton.extended(  
        onPressed: showAddTaskDialog, // Вызываем метод показа диалога  
        label: const Text('Добавить'), // Текст на кнопке  
        icon: const Icon(Icons.add), // Иконка на кнопке  
        tooltip: 'Добавить новую задачу',  
      ),  
    );  
  }  
}

                  

Демонстрация работы